import { FC, useEffect } from "react";
import { IconFont } from "../../../utils/iconfont/icon";
import styles from "./list.module.css";
import { Button, Radio, Spin, Skeleton, Statistic } from "antd";
import { useDispatch } from "react-redux";
import { BrowserRouter, Route, Switch, useLocation } from "react-router-dom";
import { Tabs } from "antd";
// import { Input } from "antd";
// import { SearchOutlined } from "@ant-design/icons";
import { useSelector } from "../../../redux/hooks";
import { getPlaylist, getUserDetail } from "../../../redux/userInfo/slice";
import { getsongList, getListComments } from "../../../redux/list/slice";
import SongLists from "../../songLists";
import Comments from "../../comments";
import {
  CaretRightOutlined,
  DownloadOutlined,
  FolderAddOutlined,
  ShareAltOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
const { Countdown } = Statistic;
const List: FC = () => {
  const location = useLocation();
  const listId = new URLSearchParams(location.search).get("listId");
  const { TabPane } = Tabs;
  const { playlist, commentsCount, comments, hotComments } = useSelector(
    (s) => s.listDetail
  );
  const { songList, privilegesSongs } = useSelector((s) => s.listDetail);
  const dispatch = useDispatch();

  useEffect(() => {
    console.log(listId);

    if (playlist) {
      let list = playlist["trackIds"].map((x) => x.id);

      dispatch(getsongList({ ids: list }));
    }
    dispatch(getListComments({ id: listId }));
  }, [playlist]);

  function callback(key) {
    console.log(key);
  }
  // const playlists = "ssss";
  // let songsId = playlist["trackIds"].map((x) => x.id);

  return (
    <div className={styles.page}>
      {playlist ? (
        <>
          <div className={styles.listInfo}>
            <div className={styles.ImgBox}>
              <img
                className={styles.img}
                src={playlist["coverImgUrl"]}
                alt=""
              />
            </div>
            <div className={styles.listDetail}>
              <div className={styles.listName}>{playlist["name"]}</div>
              <div className={styles.creator}>
                <div className={styles.creatorAva}>
                  <img src={playlist.creator["avatarUrl"]} alt="" />
                </div>{" "}
                <div className={styles.creatorName}>
                  {playlist.creator["nickname"]}
                </div>{" "}
                <div className={styles.creatorSetTime}>
                  {}
                  {dayjs(playlist["createTime"]).format("YYYY-MM-DD 创建")}
                </div>
              </div>
              <div className={styles.buttons}>
                {" "}
                <Button
                  style={{
                    marginRight: "10px",
                    background: " rgb(43,182,105)",
                    border: "none",
                  }}
                  type="primary"
                  shape="round"
                  icon={<CaretRightOutlined />}
                >
                  播放全部
                </Button>
                <Button
                  style={{
                    marginRight: "10px",
                    background: "white",
                    border: "1px solid rgb(216,216,216)",
                  }}
                  type="text"
                  shape="round"
                  icon={<FolderAddOutlined />}
                >
                  已收藏({playlist["subscribedCount"]})
                </Button>
                <Button
                  style={{
                    background: "white",
                    marginRight: "10px",
                    border: "1px solid rgb(216,216,216)",
                  }}
                  type="text"
                  shape="round"
                  icon={<ShareAltOutlined />}
                >
                  分享({playlist["shareCount"]})
                </Button>
                <Button
                  style={{
                    background: "white",

                    border: "1px solid rgb(216,216,216)",
                  }}
                  type="text"
                  shape="round"
                  icon={<DownloadOutlined />}
                >
                  下载全部
                </Button>
              </div>
              <div className={styles.counts}>
                <div>歌曲：{playlist.trackIds.length}</div>
                <div style={{ marginLeft: "15px" }}>
                  播放：{playlist["playCount"]}
                </div>
              </div>
            </div>
          </div>
          <div className={styles.listContain}>
            <div className={styles.listContainTitle}>
              {" "}
              <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="歌曲列表" key="1">
                  <div>
                    {" "}
                    <SongLists songList={songList} />
                  </div>
                </TabPane>

                <TabPane tab={`评论(${commentsCount})`} key="2">
                  <Comments hotComments={hotComments} comments={comments} />
                </TabPane>
                <TabPane tab="收藏者" key="3">
                  Content of Tab Pane 3
                </TabPane>
              </Tabs>
            </div>
          </div>
        </>
      ) : (
        <>
          <Spin />
        </>
      )}
    </div>
  );
};

export default List;
